<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品的上下架</title>
    <script src="../js/jquery-2.1.4.js"></script>
    <script src="../js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
          crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <style>
        body{
            margin:0px 0px ;
        }
        #div{
            width: 100%;
            height: 900px;
            border: 0px solid red;
        }
        #condition{
            width: 100%;
            height: 200px;
            border: 0px solid blue;
        }
        .conditionStyleOne{
            width:200px;
            height: 50px;
            border: 0px solid black;
            margin-left: 40%;
            margin-top: 70px;
            float: left;
        }
        .conditionStyleTwo{
            margin-left: 40px;
            margin-top: 70px;
            float: left;
        }
        #content{
            margin-left: 50px;

        }
    </style>
</head>
<body>

        <div id="div">

            <!--条件栏-->
<!--            <div id="condition">-->
<!--&lt;!&ndash;                <input type="text" placeholder="请输入你要查询的商家ID">&ndash;&gt;-->
<!--&lt;!&ndash;                <input type="button"  value="确认">&ndash;&gt;-->

<!--                <el-input name="xx" placeholder="请输入你要查询的商家ID"  class="conditionStyleOne">-->
<!--                <el-input type="button"  name="button" ></el-input>-->
<!--                </el-input>-->

<!--                <el-row class="conditionStyleTwo">-->
<!--                    <el-button>确定</el-button>-->
<!--                </el-row>-->
<!--            </div>-->
            <!--内容栏-->
            <div id="content">
                <el-table
                        :data="productsAll"
                        height="600"
                        border
                        style="width: 100%">
                    <el-table-column
                            fixed
                            prop="id"
                            label="商品ID"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="categoryId"
                            label="分类ID"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="storeId"
                            label="店铺ID"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="productName"
                            label="商品名字"
                            width="300">
                    </el-table-column>
                    <el-table-column
                            prop="freight"
                            label="运费"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="storeName"
                            label="店铺名字"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="sales"
                            label="销量"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="shipAddress"
                            label="发货地址"
                            width="300">
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            width="100">
                        <template slot-scope="scope">
                            <el-button @click.native.prevent="deleteRow(scope.row.id,scope.$index,productsAll)" type="text" size="small">下架</el-button>
<!--                            <el-button type="text" size="small">编辑</el-button>-->
                        </template>
                    </el-table-column>
                </el-table>
            </div>

        </div>

        <script>
           new Vue({
               el:'#div',
               data:{
                   input:'',
                   productsAll:null,
                   updateByAdminProductStatus:null
               },
               created:function(){
                   this.selectProductAll();
                },
                methods:{
                   selectProductAll:function(){
                        var  _this = this;
                        $.ajax({
                          url:'/adminProductAll',

                          success:function (data) {
                              _this.productsAll=data.list;

                          },
                          error:function (data) {
                              alert(data.responseJSON.message);
                          }  
                        })
                   },
                    deleteRow:function (id,index, rows) {
                        rows.splice(index, 1);

                       var  _this= this;
                       $.ajax({
                            url:'/updateAdminProductStatus',
                            data:{"id":id},
                            success:function (data) {
                                alert("下架成功");

                            },
                           error:function (data) {
                               alert(data.responseJSON.message);
                           }
                       })
                    }
                }
            });

        </script>
</body>
</html>